@import url(../../reset.css);

#box {
  width: 1200px;
  height: 600px;
  background: #fff url(img/advise.webp) center / cover no-repeat;
  border-radius: 5px;
}

#box > [class*=icon] {
  /* 1、此元素应该在垂直方向上是居中的 */
position:relative;
top: 50%;
margin-top: -34.5px;
  width: 41px;
  height: 69px;
  
  /* 2、移入此元素时，鼠标应当为小手形状 */
cursor: pointer;

}
li{
	list-style: none;
}
#box > .left-icon {
  /* 3、此盒子应该距离左边10个像素 */
padding-left: 10px;
float: left;
  background: url(img/icon-slides.png) 82px center;
}
.center{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
#box > .right-icon {

  /* 4、此盒子应该距离右边10个像素 */
padding-right: 10px;
float: right;
  background: url(img/icon-slides.png) 41px center;
}

#box > .left-icon:hover {
  background-position: 0;
}

#box > .right-icon:hover {
  background-position: -42px center;
}

#box > .circle {
  padding: 10px;
  position: absolute;
  bottom: 20px; 
  right: 30px;
}

#box > .circle li {
  float: left;
  width: 10px;
  height: 10px;
  /* 5、此元素应该为一个圆 */
border-radius: 50%;
  
  border: 2px solid hsla(0,0%,100%,.3);
  background-color: rgb(0 0 0 / .4);
  margin: 0 4px;
}

#box > .circle li.active {
  background: hsla(0,0%,100%,.4);
  border-color: rgb(0 0 0 / .4);
}
